<template>
	<div class="container">
		<!-- header -->
		<Headers></Headers>
		<!-- body -->
		<div class="body">
			<!-- 左侧菜单 -->
			<div class="aside" :style="{width:isCollapse ? '64px' : '200px'}">
				<!-- 切换 -->
				<div class="Toggle" @click="toggleCollapse">|||</div>
				<!-- 菜单 -->
				<el-menu default-active="2" class="el-menu-vertical-demo" background-color="#333744" text-color="#fff"
					active-text-color="#409eff" :collapse-transition="false" :collapse="isCollapse"
					:default-active="activePath" unique-opened router>
					<!-- 是否只保持一个子菜单的展开 -->
					<el-submenu :index="item.id+''" v-for="item in menuLists" :key="item.id">
						<!-- 一级菜单 -->
						<template slot="title">
							<i :class="iconData[item.id]"></i>
							<span>{{item.authName}}</span>
						</template>
						<!-- 二级菜单 -->
						<el-menu-item :index="'/'+subItem.path" v-for="subItem in item.children" :key="subItem.id"
							@click="setnavstatus('/' + subItem.path)">
							<i class="el-icon-menu"></i>
							<span>{{subItem.authName}}</span>
						</el-menu-item>
					</el-submenu>
				</el-menu>
			</div>
			<!-- 中间内容 -->
			<div class="main">
				<zh-breadcrumb>
					<zh-breadcrumb-item :to="{path:'/Welcome'}">首页</zh-breadcrumb-item>
					<zh-breadcrumb-item>{{this.parentPath}}</zh-breadcrumb-item>
					<zh-breadcrumb-item>{{this.childrenPath}}</zh-breadcrumb-item>
				</zh-breadcrumb>
				<div class="box">
					<router-view></router-view>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import Headers from "../common/Header/header.vue";
	export default {
		// 组件名称
		name: 'demo',
		// 组件参数 接收来自父组件的数据
		props: [],
		// 局部注册的组件
		components: {
			Headers
		},
		// 组件状态值
		data() {
			return {
				// 菜单是否折叠
				isCollapse: false,
				// icon图标
				iconData: {
					125: "iconfont icon-users",
					103: "iconfont icon-tijikongjian",
					101: "iconfont icon-shangpin",
					102: "iconfont icon-danju",
					145: "iconfont icon-baobiao",
				},
				// 一级菜单
				menuLists: [],
				// 一级路由
				parentPath:'',
				// 二级
				childrenPath:'',
				// 被激活的链接地址
				activePath: '',
			}
		},
		mounted() {},
		// 计算属性
		computed: {},
		// 侦听器
		watch: {},
		// 组件方法
		methods: {
			// 控制菜单显示隐藏
			toggleCollapse() {
				this.isCollapse = !this.isCollapse;
			},
			// 获取左侧菜单数据
			async getMenuList() {
				try {
					const data = await this.$apis.getMenus();
					this.menuLists = data.data1;
				} catch (e) {
					console.log(e)
				}
			},
			// 保存链接激活的状态
			setnavstatus(activePath) {
				console.log(this.activePath)
				sessionStorage.setItem('activePath', activePath);
				this.activePath = activePath;
			}
		},
		updated() {
			// 获取路径
			const path=this.$route.path.replace('/','');
			for(let item of this.menuLists){
				for(let subItem of item.children){
					if(subItem.path===path){
						this.parentPath=item.authName;
						this.childrenPath=subItem.authName;						
						return;
					}
				}
			}
			
		},
		/**
		 * 组件实例创建完成
		 */
		created() {
			this.getMenuList();
			this.activePath = sessionStorage.getItem('activePath');
		},
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100%;
		display: flex;
		flex: 1;
		flex-direction: column;

		.body {
			display: flex;
			flex: 1;

			.aside {
				background-color: #333744;

				.Toggle {
					width: 100%;
					background-color: #4a5064;
					line-height: 22px;
					font-size: 12px;
					text-align: center;
					color: #FFFFFF;
					cursor: pointer;
				}

				.el-menu {
					border-right: none;

					.el-submenu {
						span {
							font-size: 12px;
						}

						.iconfont {
							margin-right: 10px;
						}
					}
				}
			}

			.main {
				flex: 1;
				padding: 20px;
				box-sizing: border-box;
				background-color: #eaedf1;
				overflow: hidden;
				
				.box{
					border-radius: 4px;
					box-shadow: 0 1px 1px rgba(0,0,0,.15)!important;
					background-color: #FFFFFF;
					padding: 20px;
					box-sizing: border-box;
				}
			}
		}
	}
</style>
